<%@ page import="com.MusicWeb.entity.User" %>
<%@ page import="com.MusicWeb.entity.Music" %>
<%@ page import="com.MusicWeb.entity.UserMusic" %><%--
  Created by IntelliJ IDEA.
  User: 小胖
  Date: 2021/4/15
  Time: 20:10
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../components/base.jsp" %>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>音乐盒</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
        text-decoration: none;

    }

    #musicplay {
        width: 1000px;
        margin: 0 auto;
        opacity: 0.9;
    }


    /*评论按钮*/
    #content {
        width: 500px;
        height: 40px;
        resize: none;
        padding: 10px;
        margin-top: 10px;
        border-radius: 5px;
    }

    #comments {
        width: 600px;
        margin: 0 auto;
        padding: 30px;
    }

    #comments textarea {
        display: block;
    }

    #table1 div{
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .table1-button{
        width: 490px;
        border-bottom: 3px solid forestgreen;
    }

    .commentsCont button{
        width: 100px;
        margin-bottom: 15px;

        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        transition: .1s;
        font-weight: 500;
        height: 40px;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
    }

    .commentsCont button:hover{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
    }

    .commentsCont a {
        margin: 5px;
        float: right;
    }

    /*播放*/

    #MusicAudio {
        overflow: scroll;
        width: 400px;
        height: 400px;
        padding: 10px;
        background-color: white;
        display: inline-block;
    }

    #MusicAudio th {
        width: 400px;
        height: 10px;
        margin: 0 auto;
        padding: 5px;
        background-color: #beb8ca;
    }

    #MusicAudio td {
        font-size: 15px;
        height: 15px;
        text-align: center;

    }

    #MusicAudio td a {
        color: black;
        word-break: keep-all;
        text-overflow: ellipsis;
    }

    tr:nth-child(even) {
        background: #dcdcdc;
    }

    tr:nth-child(odd) {
        background: #ffffff;

    }

    /*显示歌曲信息和评论用户评论*/
    #MusicTiele {
        width: 600px;
        height: 400px;
        margin: 0 auto;
        overflow: scroll;
        overflow-y: auto;
        float: right;
        background-color: white;
    }

    .operation {
        padding-left: 40px;
    }

    #userName {
        display: inline-block;
    }

    #userReply {
        display: inline-block;
    }


    /*播放器*/
    #audionMusic{
        background-color: rgb(243, 240, 240);
        height: 54px;
        width: 1000px;
        position: relative;
        top: 50px;
        left: 0px;
    }

    #audionMusic img{
        width: 54px;
        height: 54px;
    }

    .download{
        position: relative;
        bottom: 20px;
        left: 20px;
    }

    audio{
        width: 350px;
    }

</style>

<body style="background-color: #808085;">
<%--通用代码，每个页面都引入--%>
<%@include file="../components/header.jsp"%>
<%@ include file="../components/base.jsp" %>
<%--播放按钮--%>
<div id="musicplay">
    <%
        User user = (User) request.getSession().getAttribute("user");
        Integer u_id = user.getId();
        String name = user.getAccount();
        Integer id = Integer.parseInt(request.getParameter("id"));

    %>

    <%--    歌曲列表--%>
    <table id="MusicAudio">

    </table>


    <%--音乐内容--%>
    <div id="MusicTiele">

        <div id="MusicCont">

        </div>


        <%--评论区--%>
        <div id="comments">

            <form action="<%=request.getContextPath()%>/commentinster" method="get">

                <div id="table1" style="width: 920px; font-size: 20px;padding: 10px;">评论区</div>


                <div class="commentsCont" style="width: 500px;">

                    <input name="name" type="text" value="<%= name %>" readonly style="display: none">
                    <textarea id="content" name="text" cols="20" rows="8" placeholder='请输入评论内容'></textarea>
                    <input name="music_id" type="text" value="<%= id %>" readonly style="display: none">
                    <input id="user" name="user_id" type="text" value="<%= u_id%>" readonly style="display: none">

                    <button type="submit" style="width: 80px;height: 30px; float: right;margin: 20px;"/>
                    评论</button>

                </div>
            </form>
        </div>
    </div>


    <div id="audionMusic">

    </div>

</div>
</body>

<script type="text/javascript">

    // 歌曲列表

    var musicList = [];

    // var userID = $('#user').val();

    function musicTable() {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/collectionmusic?user_id=<%=u_id %>`,
            dataType: "json",
            success: function (res) {
                musicList = res;
                console.log(musicList);
                if (res != null) {
                    $(`#MusicAudio`).html(`<tr>
                        <th>标题</th>
                        <th>作者</th>
                    </tr>`);
                    for (var i = 0; i < musicList.length; i++) {
                        $(`#MusicAudio`).append(
                            `<tr >
                            <td>
                                <a href="javascript:;" onclick="musicContent(${musicList[i].id})">${musicList[i].music_name}</a>
                            </td>
                            <td>
                                ${musicList[i].music_singer}
                            </td>
                            </tr>
                        `);
                    }

                }

                userReply();
            }
        })
    }

    musicTable();


    //点击音乐跳转到音乐内容评论
    function musicContent(id) {
        var i = id;
        location.href = `<%=request.getContextPath()%>/FunctionPage/MusicReply.jsp?id=${i}`;
    }

    // 显示评论信息
    let list = [];

    //实际内容
    function userReply() {
        var id = (getQueryVariable("id"));

        console.log(id)

        for (var i = 0; i < musicList.length; i++) {
            if (id == musicList[i].id) {
                $('#MusicCont').html(`
                        <h1 id="title" style="padding: 20px">${musicList[i].music_name}</h1>
                            <div class="operation">
                                <h3>歌手: ${musicList[i].music_singer}</h3>
                            </div>
                        `)

                $('#audionMusic').html(`
                <div style="position: relative;width:650;left: 273px;">
                    <a onclick="musciplays(${i-1})">
                        <img src="../static/img/7.png" alt="">
                    </a>
                        <audio controls="controls"  loop>
                            <source src="http://localhost:8080/download?n=${musicList[i].music_url}" />
                        </audio>
                    <a onclick="musciplays(${i+1})">
                        <img src="../static/img/8.png" alt="">
                    </a>
                    <a class="download" href="http://localhost:8080/download?n=${musicList[i].music_url}" download="${musicList[i].music_name}.mp3">下载</a>
                </div>

                 `)
            }
        }
        tablemusictext(id);

    }

    //评论输出
    function tablemusictext(id) {

        $.ajax({
            type: "GET",
            url: `http://localhost:8080/comment?i_id=${id}`,
            dataType: "json",
            success: function (res) {
                list = res;
                // console.log(res);
                if (res != null) {
                    for (var i = 0; i < list.length; i++) {
                        $(`#table1`).append(`
                        <div class="table1-button">
                            <div id="userName">${list[i].name}：</div>
                            <div id="userReply">${list[i].information_text}</div>
                        </div>
                        `)
                    }
                }
            }
        })
    }

    // userReply();


    //获取全部歌曲表单
    function Musicpage() {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/music/column`,
            dataType: "json",
            success: function (res) {
                music = res;
                musciplays();
            }
        });
    }

    Musicpage();


    // 评论代码
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }


    // 播放器
    var music = [];

    var i = getQueryVariable("lid");

    function musciplays(id) {
        var  mi=id;
        if (mi === -1) {
            mi = musicList.length - 1;

        }
        if (mi === musicList.length) {
            mi = 0;

        }
        // var url = music[i].music_url;
        var mid=musicList[mi].id;
        location.href=`http://localhost:8080/FunctionPage/MusicReply.jsp?id=${mid}`
    }


</script>
</html>
